<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>公转小球</title>
	</head>

	<body>
		<canvas id="mycanvas" width="800" height="800"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById("mycanvas");
			var ctx = canvas.getContext('2d');
			var width = canvas.width;
			var height = canvas.height;
			var T = 15;
			ctx.translate(width / 2, height / 2);
			/**
			 * 
			 * @param {Number} x
			 * @param {Number} y
			 * @param {Number} R
			 * @param {Number} r
			 * @param {Number} jd
			 * @param {String} color
			 * @param {Number} direct
			 * @param {Number} isSmall
			 */
			function Ball(x, y, R, r, jd, color, direct, isSmall) {
				this.x = x;
				this.y = y;
				this.R = R;
				this.r = r;
				this.jd = jd;
				this.direct = direct;
				this.isSmall = isSmall;
				this.color = color;
			}

			function drawBall(ctx) {
				for(var i = 0; i < balls.length; i++) {
					ctx.beginPath();
					ctx.globalAlpha = '0.5';
					ctx.fillStyle = 'greenyellow';
					ctx.arc(balls[i].x, balls[i].y, balls[i].r + 15, 0, 2 * Math.PI);
					ctx.fill();
					
					ctx.beginPath();
					ctx.globalAlpha = '1';
					ctx.fillStyle = balls[i].color;
					ctx.arc(balls[i].x, balls[i].y, balls[i].r, 0, 2 * Math.PI);
					ctx.fill();
					if(balls[i].isSmall == 1) {
						balls[i].jd += balls[i].direct;
						balls[i].x = Math.cos(balls[i].jd / 180 * Math.PI) * balls[i].R;
						balls[i].y = Math.sin(balls[i].jd / 180 * Math.PI) * balls[i].R;
					}
					
				}

			}
			var balls = [
				//				new Ball(200, 0, 200, 20, 300, 'red',1, 1),
				//				new Ball(200, 0, 200, 20, 100, 'red',1, 1),
				//				new Ball(200, 0, 100, 20, 100, 'red',-1, 1),
				//				new Ball(0, 0, 0, 30, 0, 'yellow',1, 0)
			]
			createBall(0, 30, 0, 0, 1);
			createBall(100, 20, 1, 1, 4);
			createBall(200, 20, -0.11, 1, 8);

			function createBall(R, r, direct, isSmall, num) {
				for(var i = 0; i < num; i++) {
					var x = Math.cos(i * 2 / num * Math.PI) * R;
					var y = Math.sin(i * 2 / num * Math.PI) * R;
					var color = "rgb(" + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + "," + parseInt(Math.random() * 256) + ")";
					var ball = new Ball(x, y, R, r, 360 / num * i, color, direct, isSmall);
					balls.push(ball);
					
					
				}

				//				str.push()
				//				start(speed);
			}

			//			function start(speed) {
			var loop = setInterval(function() {
					ctx.clearRect(-width / 2, -height / 2, width, height);
					//背景颜色
					ctx.fillStyle = 'cornflowerblue';
					ctx.fillRect(-width / 2, (-height / 2), width, width);
					drawBall(ctx);
				}, 10)
				//			}
		</script>
	</body>

</html>